a,ul{
    text-decoration: none;
    color: black;
    list-style: none;
    padding: 0;
    margin: 0;
}
.main{
    // div{
    //     border: solid;
    // }
    .ctg{
        width: 1190px;
        height: 480px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        position: relative;
        .left{
            width: 190px;
            height: 480px;
            .categroy{
                >li{
                    >a{
                        
                    }
                    .sub_main{
                        display: none;
                    }
                    &:hover{
                        .sub_main{
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 190px;
                            right: 0;
                            min-height: 480px;
                            background-color: white;
                            z-index: 999;
                        }
                    }
                }
            }
        }
        .center{
            span{
                border: solid;
            }
            width: 590px;
            height: 480px;
            position: relative;
            .thump{
                overflow: hidden;
                display: flex;
                img{
                    width: 100%;
                }
            }
            .dir{
                position: absolute;
                top: calc(50% - 18px);
                width: 100%;
                display: flex;
                justify-content: space-between;
                span{
                    width: 26px;
                    height: 36px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: white;
                    background-color: rgba(0, 0, 0, 0.397);
                    cursor: pointer;
                    transition: 300ms;
                    &:hover{
                        background-color: rgba(0, 0, 0, 0.767);
                    }
                    &:nth-child(1) {
                        border-radius: 0 50% 50% 0;
                    }
                    &:nth-child(2) {
                        border-radius: 50% 0 0 50%;
                    }
                }
            }
            .dot{
                position: absolute;
                left: 40px;
                bottom: 40px;
                display: flex;
            }
            span{
                width: 9px;
                height: 9px;
                border-radius: 50%;
                margin: 0 3px;
                background-color: rgba(255, 255, 255, 0.4);
                border: transparent 1px solid;
                background-clip: content-box;
                box-sizing: content-box;
                &:hover {
                    border: rgba(0, 0, 0, 0.541) 1px solid;
                    background-color: rgba(255, 255, 255, 0.829);
                }
            }
        }
        .right{
            width: 390px;
            height: 480px;
        }
    }
}